<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<script src="script/jquery-3.0.0.min.js"></script>
<body>
    <div class="container">
        <br />
        <br />
        <br />
        <br />
        <div class="row">
          <div class="col">
            
          </div>
          <div class="col">
            <form id="login-form">
                Username:<br>
                <input type="text" name="username" value="" placeholder="username" required id='login-username'>
                <br>
                Password:<br>
                <input type="password" name="pwd" value="" placeholder="password" required id='login-pwd'>
                <br><br>
                <input type="submit" value="Submit" id="login-submit">
            </form>
          </div>
          <div class="col">
            
          </div>
        </div>
    </div>
</body>
<script>
'use strict';
(function(){
    var goToLoginSuccess = function() {
        window.location.href = 'main.html';
    };

    var showLogin = function() {
        $('#login-form').submit(function(e) {
            e.preventDefault();

            var data = {
                username: $('#login-username').val(),
                pwd: $('#login-pwd').val()
            };
            
            $.ajax({
                url:'/login',
                type:"POST",
                data: JSON.stringify(data),
                contentType:"application/json; charset=utf-8",
                dataType:"json",
                success: function(response) {
                    if(response.data.success === true) {
                        localStorage.setItem('login-token', response.data.token);
                        localStorage.setItem('username', response.data.username);
                        goToLoginSuccess();
                    }else {
                        alert(response.data.msg);
                    }
                }
            });
        })
    };

    var token = localStorage.getItem('login-token');
    var username = localStorage.getItem('username');

    if(token !== null && token !== '' && username !== null && username !== '') {
        $.ajax({
            url:'/token-login',
            type:"POST",
            data: JSON.stringify({'token': token, 'username': username}),
            contentType:"application/json; charset=utf-8",
            dataType:"json",
            success: function(response) {
                if(response.data.success === true) {
                    goToLoginSuccess();
                }else {
                    localStorage.removeItem('login-token');
                    localStorage.removeItem('username');
                    showLogin();
                }
            }
        });
    }else {
        showLogin();
    }
    
   //bottom     
})();
</script>
</html>